<template>
  <div class="friend">
    <div class="row">
      <div class="col-3 friend-list-wrap">
        <q-list dense padding>
          <q-intersection
            v-for="f in friends"
            :key="f.id"
            transition="scale"
            class="example-item"
            :class="active === f.id && 'active-item'"
          >
            <info-card
              :id="f.id"
              :avatar="f.avatar"
              :remark="f.remark"
              :email="f.email"
              @active="handleActive"
            />
          </q-intersection>
        </q-list>
      </div>
      <div class="col-9 friend-info"></div>
    </div>
  </div>
</template>

<script>
import { uid } from 'quasar';
import { InfoCard } from '@/components';

export default {
  components: {
    'info-card': InfoCard,
  },
  data() {
    return {
      friends: [
        {
          id: uid(),
          email: 'useryechen@gmail.com',
          nickname: 'kevin',
          remark: '本人',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '陕西 西安',
          sex: 1,
          age: 19,
          number: 'useryechen',
        },
        {
          id: uid(),
          email: 'useryechen1@gmail.com',
          nickname: '一叶知秋',
          remark: '备注1',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '山东 青岛',
          sex: 1,
          age: 19,
          number: 'useryechen1',
        },
        {
          id: uid(),
          email: 'useryechen2@gmail.com',
          nickname: 'null',
          remark: '备注2',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '北京 朝阳',
          sex: 1,
          age: 19,
          number: 'useryechen2',
        },
        {
          id: uid(),
          email: 'useryechen3@gmail.com',
          nickname: '豪情',
          remark: '备注3',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '陕西 咸阳',
          sex: 1,
          age: 19,
          number: 'useryechen3',
        },
        {
          id: uid(),
          email: 'useryechen4@gmail.com',
          nickname: '勾三股四',
          remark: '备注4',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '北京 海淀',
          sex: 1,
          age: 19,
          number: 'useryechen4',
        },
        {
          id: uid(),
          email: 'useryechen5@gmail.com',
          nickname: '尤小右',
          remark: '备注5',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '吉林 四平',
          sex: 1,
          age: 19,
          number: 'useryechen5',
        },
        {
          id: uid(),
          email: 'useryechen6@gmail.com',
          nickname: 'winter',
          remark: '备注6',
          avatar: require('@/assets/avatar.jpg'),
          cityname: '黑龙江 齐齐哈尔',
          sex: 1,
          age: 19,
          number: 'useryechen6',
        },
      ],
      active: '',
    };
  },

  methods: {
    // 点击选中
    handleActive(id) {
      this.active = id;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/quasar.variables.scss';

.friend {
  height: calc(100vh - 50px);
  .row {
    height: 100%;
    .friend-list-wrap {
      border-right: 1px solid $border_color;
      background: $bg_color1;
      .q-item__label {
        color: $sub_title_color;
        font-size: 14px;
      }
      .q-item {
        padding: 4px 16px !important;
      }
      .active-item {
        background: $active_bg;
      }
    }
    .friend-info {
      background: $bg_color2;
    }
    .friend-list-wrap,
    .friend-info {
      height: 100%;
    }
  }
}
</style>
